<template>
    <div class="header wrap">
        <div class="l">
            <h1><a href=""><img src="@/assets/img/indexLogo.6f8ac4f0.png"></a></h1>
        </div>
        <div class="c">
            <ul class="nav">
                <li @click="$router.push('/Index')">首页</li>
                <li @click="$router.push('/Gift')">全部礼品</li>
                <li @click="$router.push('/UserCenter')">个人中心</li>
                <li @click="$router.push('/MyList')">我的订单</li>
                <li @click="$router.push('/Free')">专属福利</li>
            </ul>
        </div>
        <div class="r">
            <input type="text" placeholder="请输入要找的商品">
            <span><img width="15px" height="15px" src="@/assets/img/search.png" alt=""></span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Header',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="less">
  .header{
     height: 122px;
     background-color: antiquewhite;
     display: flex;
     justify-content: space-between;
     align-items: center;
     .c .nav{
        display: flex;
        width: 500px;
        justify-content: space-between;
        li{
            cursor: pointer;
        }
     }
     .r {
        display: flex;
        input{
        width: 214px;
        height: 32px;
        border: 1px solid #ddd;
        border-radius: 10px 0px 0px 10px;
        text-indent: 10px;
       }
       span{
          width: 50px;
          height: 32px;
          border-radius: 0px 15px 15px 0;
          background: #0a328e;
        //   行内元素不能设置宽高
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
       }
    }
}
</style>